<template>
<transition name="fade">
<div class="info">
	<img class="portrait" src='../../../statics/imgs/zxx.jpg' width="200" height="200" />

	<div class="user-info">
      <h1 class="nick">小妖2小仙</h1>
			<a href="javascript:;" class="logout" @click="logout" v-if="!isLogouting"> [退出]</a>
	</div>
  <Loading v-if="isLogouting" marginTop="3%"></Loading>
</div>
</transition>
</template>
<script>
import Loading from '../subcom/Loading.vue';
import {deleteCookie} from '../../kits/cookie.js';

export default { 
  name: 'UserInfo',
  data(){
  	return {
      isLogouting: false,
    }
  },
  components:{
    Loading
  },
  methods: {
    //注销
    logout(){
      //删除cookie并跳到登录页
      this.isLogouting = true;
      deleteCookie('session');

      // 模拟
      setTimeout(()=>{
        this.$router.push('/login/');
        this.isLogouting = false;
      },1000)
    }
  }
}
</script>

<style scoped>
.info{background: #fff; width: 100%; height: 600px; color: #2c3e50; text-align: center; padding-top: 170px;}
.portrait{width: 200px; height: 200px; overflow:hidden; -webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%; 
border-radius: 100%; background-color: #CCCCCC; margin:0 auto 15px;border: 2px solid #2c3e50; display: block;}
.user-info{margin: 38px 0 0 0; vertical-align: top;}
.user-info, .w-star, .w-diamond, .nick, .level{display: inline-block;}
.nick{margin-right: 10px;}
.cut{padding: 0 10px; color:#E9E9E9; font-size: 15px;}
.logout{color: #2c3e50; display: block; margin-top: 20px;}
</style>
